<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">优惠券</h3>
    <el-form :model="couponForm" ref="couponForm">
      <div class="set-part coupon-part mt20">
        <el-form-item label="添加方式" prop="blockType">
          <el-radio-group v-model="couponForm.blockType">
            <el-radio :label="0">手动添加</el-radio>
            <el-radio :label="1">自动获取</el-radio>
          </el-radio-group>
        </el-form-item>
        <h4 class="form-title">添加优惠券</h4>
        <div class="title-tip">最多添加10张优惠券</div>
        <ul v-if="couponForm.blockList.length" class="coupon-warp">
          <draggable v-model="couponForm.blockList" :options="couponOptions" class="coupon-list">
            <li class="coupon-item"
              v-for="(item, index) in couponForm.blockList"
              :key="index">
              <div class="item-box">优惠券：{{item.title}}</div>
              <div class="item-delete">
                <i class="el-icon-close" @click="couponForm.blockList.splice(index, 1)"></i>
              </div>
            </li>
          </draggable>
        </ul>
        <div v-if="couponForm.blockList.length < 11" class="add-button">
          <el-button plain @click="selectCoupon()"><i class="el-icon-plus"></i>添加优惠券</el-button>
        </div>
      </div>
      <div class="set-part">
        <el-form-item label="样式" prop="blockClass">
          <div class="flex">
            <div class="val-show flex-1">{{couponForm.blockClass | filterRadio(classOption)}}</div>
            <en-radio-tab
              :optionsData="classOption"
              :defaultData="couponForm.blockClass"
              v-model="couponForm.blockClass">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="颜色" prop="blockColor">
          <div class="flex">
            <div class="val-show flex-1">{{couponForm.blockColor | filterRadio(colorOption)}}</div>
            <en-radio-color
              :optionsData="colorOption"
              :defaultData="couponForm.blockColor"
              v-model="couponForm.blockColor">
            </en-radio-color>
          </div>
        </el-form-item>
        <el-form-item label="隐藏已抢完券" label-width="106px" prop="hideFinish">
          <div class="flex">
            <div class="val-show flex-1">{{couponForm.style.hideFinish?'隐藏':'不隐藏'}}</div>
            <el-checkbox v-model="couponForm.style.hideFinish"></el-checkbox>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">数据提交</el-button>

    <en-coupon-dialog
      :show="dialogCouponShow"
      :default-data="defaultCouponDataDialog"
      @close="dialogCouponShow = false"
      @confirm="handleCouponDialogConfirm"/>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import mixin from '../../mixin'

  export default {
    name: 'EnCouponPicker',
    mixins: [mixin],
    components: { draggable },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        visible: this.show,
        couponForm: {},
        /** 图片配置 */
        couponOptions: {
          animation: 150,
          sort: true,
          handle: '.coupon-item'
        },

        classOption: [{
          value: 'style_1',
          label: '样式一',
          icon: 'fonticon-coupon-style1'
        },{
          value: 'style_2',
          label: '样式二',
          icon: 'fonticon-coupon-style2'
        },{
          value: 'style_3',
          label: '样式三',
          icon: 'fonticon-coupon-style3'
        },{
          value: 'style_4',
          label: '样式四',
          icon: 'fonticon-coupon-style4'
        }],
        colorOption: [{
          value: 'color_1',
          color: '#FF2437',
          label: '红色'
        },{
          value: 'color_2',
          color: '#FE933D',
          label: '黄色'
        },{
          value: 'color_3',
          color: '#FBD9BC',
          label: '浅黄色'
        },{
          value: 'color_4',
          color: '#7A2CF7',
          label: '紫色'
        }],
        dialogCouponShow: false,
        defaultCouponDataDialog: []
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      defaultData(newVal) {
        let _showData = JSON.parse(JSON.stringify(newVal));
        this.couponForm = {
          ..._showData
        };
      }
    },
    methods: {
      /*
        * @date 2020-02-03
        * @author wolfMan
        * @description {选择优惠券弹层}
      */
      selectCoupon () {
        let _defaultData = [];
        _defaultData = this.couponForm.blockList.map(item => {
          return item.id
        });
        this.defaultCouponDataDialog = _defaultData;
        this.dialogCouponShow = true;
      },
      handleConfirm() {
        this.$refs['couponForm'].validate((valid) => {
          if (valid) {
            this.$emit('confirm', this.couponForm);
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      },
      handleCouponDialogConfirm(_data) {
        this.couponForm.blockList = _data;
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .coupon-part {
    padding-bottom: 20px;
    .coupon-warp {
      list-style: none;
      padding: 12px 20px 0 20px;
      margin: 0 -20px;
      background: #f2f2f2;
      .coupon-item {
        position: relative;
        border-radius: 2px;
        background-color: #fff;
        box-shadow: 0 0 4px 0 rgba(10,42,97,.2);
        cursor: move;
        & + .coupon-item {
          margin-top: 12px;
        }
        .item-box {
          display: flex;
          padding: 10px;
          line-height: 20px;
          border-radius: 4px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          color: #333;
          font-size: 14px;
        }
        .item-delete {
          position: absolute;
          top: -8px;
          right: -8px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 16px;
          height: 16px;
          border-radius: 8px;
          cursor: pointer;
          background: #CACACA;
          color: #fff;
          font-size: 14px;
        }
      }
    }
    .add-button {
      padding: 10px 20px;
      margin: 0 -20px;
      background: #f2f2f2;
      .el-button {
        position: relative;
        padding: 0 20px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border: solid 1px #3870EA;
        box-sizing: border-box;
        border-radius: 4px;
        color: #3870EA;
        &:hover,
        &:focus {
          background: rgba(56, 112, 234, .1);
        }
        i {
          position: absolute;
          top: 1px;
          left: 18px;
          line-height: 38px;
          font-size: 16px;
          font-weight: 700;
        }
      }
    }
  }
  .radio-color {
    height: 32px;
  }
</style>